<!--  添加产品物料抽屉-->
<template>
    <el-drawer v-model="drawer" :with-header="false" :before-close="handlerClosed" >


        <span class="main-title">添加产品/物料信息</span>
        <el-form :model="form" :label-width="70">
            <!--            选择新增的是产品还是物料，单选按钮-->
            <el-form-item label="类型">
                <el-radio-group v-model="form.category" @change="handleChanged">
                    <el-radio label="0">产品</el-radio>
                    <el-radio label="1">物料</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="产品单位">
                        <!--                        下拉菜单-->
                        <el-select v-model="form.idUnit" placeholder="请选择单位">
                            <el-option
                                    v-for="item in units"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--            当前库存数量-->
                    <el-form-item label="库存数量">
                        <el-input v-model="form.count"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="产品型号">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="点击右侧开关，可自动生成"
                                placement="top">
                            <div style="display: flex;justify-items: center">
                                <el-input :disabled="isRandom" v-model="form.model"></el-input>
                                <el-switch v-model="isRandom"/>
                            </div>
                        </el-tooltip>

                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="分类">
                        <el-select v-model="form.classify" placeholder="请选择分类">
                            <el-option
                                    v-for="item in types"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>

                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="产品描述">
                <el-input v-model="form.comments"></el-input>
            </el-form-item>

            <!--            安全库存阈值-->
            <el-form-item label="安全库存">
                <el-input v-model="form.inventory"></el-input>
            </el-form-item>

        </el-form>
        <div class="drawer-footer">
            <el-button type="primary" @click="handleSubmit">提交</el-button>
            <el-button @click="handlerClosed">取消</el-button>
        </div>
    </el-drawer>
</template>
<script>
import mdAPI from "@/util/request-md/mat-pro/mat-pro.js";
import unitAPI from "@/util/request-md/unit/unit.js";
import rulesAPI from "@/util/request-md/rules/rules.js";
import BindBOMDialog from "@/components/widget/dialog/BindBOMDialog.vue";

export default {
    emits: ['callClosed','callAddSuccess'],
    props: ['visible'],
    data() {
        return {
            isRandom: false,//是否生成随机型号
            drawer: false,
            form: {
                idUnit: '',
                stockStatus: 1,
                model: "",
                inventory: 0,
                name: "",
                comments: "",
                classify: '',
                category: '0',
                // createtime: "2024-04-05T12:00:00Z",
                count: 0
            },
            units: [{
                value: '1',
                label: '个'
            }, {
                value: '2',
                label: '箱'
            }],
            types: [],
            proType: [],
            matType: []
        }
    },
    watch: {
        visible(val) {
            this.drawer = val;
        },
        isRandom(val) {
            if (val) {
                this.getRulesEncoding();
            } else {
                this.form.model = '';
            }
        }
    },
    methods: {
        handlerClosed() {
            this.$emit('callClosed');
        },
        handleChanged(res) {
            if (res === '0') {
                this.types = this.proType;
            } else {
                this.types = this.matType;
            }
        },
        //添加产品信息
        handleSubmit() {
            // console.log(this.form, '>>>添加产品的参数信息');

            mdAPI.addProduct(this.form, ((res) => {
                if (res.code === 200) {
                    // console.log(this.form,">>>>添加时候的form");
                    this.$message.success("添加成功");

                    this.$emit('callAddSuccess');
                } else {
                    this.$message.error("添加失败");
                }
            }));
        },
        //获取产品分类信息
        loadClassifyInfo() {
            this.proType = [];
            this.matType = [];
            mdAPI.getMatProClassify((res) => {
                if (res.code === 200) {
                    let result = res.data;
                    for (let i = 0; i < result.length; i++) {
                        if (result[i].category === 0) {
                            this.proType.push({
                                value: result[i].idClassify,
                                label: result[i].name,
                            });
                        } else {
                            this.matType.push({
                                value: result[i].idClassify,
                                label: result[i].name,
                            });
                        }
                    }
                    this.types = this.proType;
                }
            });
        },

        //获取单位信息
        //加载单位信息
        loadUnits() {
            this.units = [];
            unitAPI.getAllUnit((res) => {
                if (res.code === 200) {
                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].status === 1) {
                            this.units.push({
                                label: res.data[i].name,
                                value: res.data[i].idUnit
                            })
                        }
                    }
                } else {
                    this.$message.error("获取失败" + res.code);
                }
            })
        },
        getRulesEncoding() {
            if (this.form.category === '0') {
                rulesAPI.getEncoding({rulesName: 'PRO_NO'}, ((res) => {
                    if (res.code === 200) {
                        this.form.model = res.data;
                    }else{
                        this.$message.error("获取异常"+res.code);
                    }
                }));
            }
            if (this.form.category === '1') {
                rulesAPI.getEncoding({rulesName: 'MAT_NO'}, ((res) => {
                    if (res.code === 200) {
                        this.form.model = res.data;
                    }else{
                        this.$message.error("获取异常"+res.code);
                    }
                }));
            }

        }
    },
    mounted() {
        this.loadClassifyInfo();
        this.loadUnits();
    }
};
</script>
<style scoped>
.drawer-footer {
    position: absolute;
    display: flex;
    bottom: 20px;
}
</style>